@import '../../../styles/modules/all';

app-login {
  --color-login-link-hover: #{$color-text2-default};

  display: block;

  @include theme-dark {
    --color-login-link-hover: #{$color-text1-dark};
  }

  form {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;

    .form-content {
      display: flex;
      height: 100%;
      justify-content: center;
      position: relative;
      width: 100%;

      & > div {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 10;
      }
    }

    @media (hover: hover) {
      a {
        &:active,
        &:focus,
        &:hover {
          border-bottom-color: var(--color-login-link-hover);
          color: var(--color-login-link-hover);
        }
      }
    }
  }

  .form-group {
    input {
      font-family: $font-stack-code;

      &::placeholder {
        font-family: $font-stack-regular;
        font-size: 1.1rem;
      }

      &::-ms-reveal,
      &::-ms-clear {
        display: none;
      }

      &[name='newServiceUrl'] {
        font-family: $font-stack-regular;
        font-size: 1.1rem;
      }
    }
  }

  .header-panel {
    z-index: 10;
  }

  .login-form-container {
    flex-grow: 1;
  }

  .login-form-existing,
  .login-form-new,
  .update-service-panel {
    height: 100%;
    max-width: 22rem;
  }

  .login-form-existing {
    input[name='txtPassword'] {
      padding-right: 2.7rem;
    }
  }

  .login-form-new {
    input[name='txtPassword'] {
      background: transparent !important;
      position: relative;
      z-index: 20;
    }
  }

  .logo {
    background-image: url('../../../../res/images/logo.svg');
    background-position-x: 50%;
    background-position-y: 0.5rem;
    background-repeat: no-repeat;
    background-size: 10rem;
    flex: 0 1 17.5rem;

    @include theme-dark {
      background-image: url('../../../../res/images/logo-dark.svg');
    }
  }

  .secret-form-group {
    .progress,
    .progress-bar-background {
      border-radius: $border-radius-input;
      font-size: 1.2rem;
      height: 100%;
      position: absolute;
      top: 0;
      width: 100%;
    }

    .progress {
      background-color: transparent;
      border-color: var(--color-input-bg);
      border-style: solid;
      border-width: 0.1rem;
      z-index: 10;

      .progress-bar {
        background-color: var(--color-danger);

        @include theme-dark {
          background-color: var(--color-danger);
        }
      }
    }

    .progress-bar-background {
      background-color: var(--color-input-bg);
    }
  }

  .selected-service {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
    width: 100%;

    a {
      @include text-overflow-ellipsis;
    }

    label {
      flex: 0 0;
      margin: 0 0.3rem 0 0;
      white-space: nowrap;
    }

    .status-icon {
      margin-left: 0.25rem;

      .loading .spinner-border {
        border-color: var(--color-text);
        border-right-color: transparent !important;
      }
    }
  }

  .service-info {
    ul {
      list-style: none;
      margin: 0 1rem 0.75rem;
      padding: 0;
      position: relative;

      li {
        align-items: center;
        display: flex;
        justify-content: space-between;

        label {
          font-weight: 700;
          margin-bottom: 0;
          padding-right: 0.5rem;
        }

        span {
          flex: 1 0 auto;
          text-align: right;
        }
      }
    }

    .service-message {
      margin: 0 1rem 1rem;
      max-height: 5rem;
    }

    .service-warning {
      font-size: 0.9rem;
      line-height: 1.2rem;
    }
  }

  .service-url-container {
    align-items: center;
    display: flex;
  }

  .toggle-form {
    margin-top: 1rem;
    text-align: center;
  }

  .well {
    margin-bottom: 0;

    a {
      border-bottom-color: var(--color-well-text);
      color: var(--color-well-text);

      @media (hover: hover) {
        &:active,
        &:focus,
        &:hover {
          border-bottom-color: var(--color-well-link-hover);
          color: var(--color-well-link-hover);
        }
      }
    }
  }
}
